<template>
  <view class="reason-page">
    <!-- 进度条导航（与yzmReturnRequest.vue保持一致） -->
    <view class="progress-nav-container">
      <scroll-view class="progress-nav" scroll-x="true" scroll-with-animation>
        <view 
          v-for="(step, index) in progressSteps" 
          :key="index"
          class="nav-step"
          :class="{ 'active': index <= currentStep }"
        >
          <view class="step-content">
            <text class="step-text">{{ step }}</text>
          </view>
          <view v-if="index < progressSteps.length - 1" class="step-arrow">></view>
        </view>
      </scroll-view>
    </view>

    <!-- 商品信息区域 -->
    <view class="product-section">
      <view class="product-item">
        <image :src="productInfo.imageUrl" class="product-image"></image>
        <view class="product-details">
          <text class="product-name">{{ productInfo.name }}</text>
          <text class="product-attr">{{ productInfo.attr }}</text>
          <text class="product-price">¥ {{ productInfo.price }}</text>
        </view>
        <text class="product-quantity">×{{ productInfo.quantity }}</text>
      </view>
    </view>

    <!-- 原因选择区域 -->
    <view class="reason-section">
      <view class="reason-input" @click="showReasonPicker">
        <text class="reason-placeholder">{{ selectedReason || '请选择原因' }}</text>
        <text class="reason-arrow">></text>
      </view>
    </view>

    <!-- 详细描述区域 -->
    <view class="description-section">
      <textarea 
        v-model="description"
        placeholder="为尽快处理您的售后申请，请填写详细的描述 (10-300字)"
        class="description-textarea"
        maxlength="300"
      ></textarea>
      <text class="char-count">{{ description.length }}/300</text>
    </view>

    <!-- 图片上传区域 -->
    <view class="upload-section">
      <text class="upload-title">上传图片 (必传)</text>
      <view class="upload-area">
        <view 
          class="upload-item"
          v-for="(image, index) in uploadedImages"
          :key="index"
        >
          <image :src="image" class="uploaded-image"></image>
          <view class="delete-btn" @click="deleteImage(index)">×</view>
        </view>
        <view 
          class="upload-btn"
          v-if="uploadedImages.length < 3"
          @click="chooseImage"
        >
          <text class="upload-icon">+</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-actions">
      <button 
        class="submit-btn"
        @click="submitReason"
        :disabled="!selectedReason || uploadedImages.length === 0"
      >
        下一步
      </button>
    </view>

    <!-- 原因选择滑动选择器 -->
    <uni-popup ref="reasonPopup" type="bottom">
      <view class="reason-popup">
        <view class="popup-header">
          <text class="popup-cancel" @click="closeReasonPicker">取消</text>
          <text class="popup-confirm" @click="confirmReason">确定</text>
        </view>
        <view class="picker-container">
          <view class="picker-mask picker-mask-top"></view>
          <view class="picker-mask picker-mask-bottom"></view>
          <view class="picker-indicator"></view>
          <view class="picker-content" :style="{ transform: `translateY(${translateY}px)` }">
            <view 
              class="picker-item"
              v-for="(reason, index) in reasonOptions"
              :key="index"
              :class="{ 'selected': tempSelectedReason === reason }"
              @click="selectReason(reason, index)"
            >
              <text class="picker-text">{{ reason }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentStep: 1, // 当前步骤设置为1（申请原因步骤）
        progressSteps: ['提交申请', '申请原因', '客服受理', '寄回商品', '官方收货', '完成换货'],
        selectedReason: '',
        tempSelectedReason: '', // 临时选中的原因，用于弹窗
        description: '',
        uploadedImages: [],
        translateY: 0, // 滑动选择器的位移
        itemHeight: 44, // 每个选项的高度
        productInfo: {
          name: '商品名称',
          attr: '商品属性',
          price: 12,
          quantity: 1,
          imageUrl: '/static/c1.png'
        },
        reasonOptions: [
          '尺寸问题',
          '商品有瑕疵/脏污',
          '商品质量问题',
          '与商品描述不符',
          '颜色不喜欢',
          '商品不喜欢',
          '其他'
        ]
      }
    },
    methods: {
      // 显示原因选择器
      showReasonPicker() {
        this.tempSelectedReason = this.selectedReason;
        // 计算当前选中项的位置
        const selectedIndex = this.reasonOptions.indexOf(this.selectedReason);
        if (selectedIndex >= 0) {
          this.translateY = -(selectedIndex * this.itemHeight);
        } else {
          this.translateY = 0;
        }
        this.$refs.reasonPopup.open();
      },
      
      // 关闭原因选择器
      closeReasonPicker() {
        this.$refs.reasonPopup.close();
      },
      
      // 选择换货原因
      selectReason(reason, index) {
        this.tempSelectedReason = reason;
        this.translateY = -(index * this.itemHeight);
      },
      
      // 确认选择原因
      confirmReason() {
        this.selectedReason = this.tempSelectedReason;
        this.closeReasonPicker();
      },
      
      // 选择图片
      chooseImage() {
        uni.chooseImage({
          count: 3 - this.uploadedImages.length,
          sizeType: ['compressed'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.uploadedImages = [...this.uploadedImages, ...res.tempFilePaths];
          }
        });
      },
      
      // 删除图片
      deleteImage(index) {
        this.uploadedImages.splice(index, 1);
      },
      
      // 提交申请原因
      submitReason() {
        if (!this.selectedReason) {
          uni.showToast({
            title: '请选择换货原因',
            icon: 'none'
          });
          return;
        }
        
        if (this.uploadedImages.length === 0) {
          uni.showToast({
            title: '请上传图片',
            icon: 'none'
          });
          return;
        }
        
        // 构建提交数据
        const submitData = {
          reason: this.selectedReason,
          description: this.description,
          images: this.uploadedImages
        };
        
        console.log('提交的申请原因数据:', submitData);
        
        // 这里可以调用API提交数据
        uni.showLoading({
          title: '提交中...'
        });
        
        // 模拟提交
        setTimeout(() => {
          uni.hideLoading();
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          });
          
          // 跳转到下一步
          this.navigateToNextStep();
        }, 1500);
      },
      
      // 跳转到下一步
      navigateToNextStep() {
        // 可以通过事件总线或其他方式传递数据给上一页
        uni.$emit('reasonSubmitted', {
          reason: this.selectedReason,
          description: this.description,
          images: this.uploadedImages
        });
        
        // 跳转到客服受理页面
        uni.navigateTo({
          url: '/pages/yzmHCustomerAcceptance/yzmHCustomerAcceptance'
        });
      }
    }
  }
</script>

<style>
/* 与yzmReturnRequest.vue完全一致的导航栏样式 */
page {
  background-color: #f5f5f5;
  font-size: 14px;
}

.reason-page {
  min-height: 100vh;
  padding-bottom: 100px;
  box-sizing: border-box;
}

/* 进度条导航容器（完全一致） */
.progress-nav-container {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}

.progress-nav {
  width: 375px; /* iPhone6/7/8宽度 */
  height: 40px;
  white-space: nowrap;
}

.nav-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 100%;
  position: relative;
}

.step-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.step-text {
  font-size: 12px;
  color: #999;
  text-align: center;
  line-height: 1.2;
  padding: 0 3px;
}

.nav-step.active .step-text {
  color: #ff4757;
  font-weight: 500;
}

.step-arrow {
  margin: 0 2px;
  color: #ddd;
  font-size: 10px;
}

/* 其他原有样式保持不变 */
.product-section {
  background-color: #fff;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
}

.product-item {
  display: flex;
  align-items: center;
}

.product-image {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
  object-fit: cover;
}

.product-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 4px;
}

.product-attr {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.product-price {
  font-size: 16px;
  color: #ff4757;
  font-weight: 500;
}

.product-quantity {
  font-size: 14px;
  color: #666;
}

.reason-section {
  background-color: #fff;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
}

.reason-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}

.reason-placeholder {
  font-size: 14px;
  color: #999;
}

.reason-arrow {
  font-size: 16px;
  color: #999;
}

.description-section {
  background-color: #fff;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
  position: relative;
}

.description-textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  box-sizing: border-box;
}

.char-count {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  color: #999;
}

.upload-section {
  background-color: #fff;
  margin: 10px 15px;
  padding: 15px;
  border-radius: 8px;
}

.upload-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 15px;
  display: block;
}

.upload-area {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.upload-item {
  position: relative;
  width: 80px;
  height: 80px;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}

.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: #ff4757;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}

.upload-btn {
  width: 80px;
  height: 80px;
  border: 2px dashed #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.upload-icon {
  font-size: 32px;
  color: #999;
}

.reason-popup {
  background-color: #fff;
  border-radius: 8px 8px 0 0;
  max-height: 60vh;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.popup-cancel {
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.popup-confirm {
  font-size: 16px;
  color: #007aff;
  cursor: pointer;
}

.picker-container {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.picker-mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 2;
  pointer-events: none;
}

.picker-mask-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
}

.picker-mask-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
}

.picker-indicator {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  margin-top: -22px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  z-index: 1;
  pointer-events: none;
}

.picker-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 88px;
  transition: transform 0.3s ease;
}

.picker-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.picker-item.selected {
  font-weight: 500;
  color: #007aff;
}

.picker-text {
  font-size: 16px;
  color: #333;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: #fff;
  border-top: 1px solid #eee;
}

.submit-btn {
  width: 100%;
  height: 44px;
  background-color: #ff4757;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>